<template>
	<div>
		<div class="dis_flex">
			<div class="flex_l">
				<el-card shadow="hover">
					<div class="l_top">等候人数：5</div>
					<el-button type="primary" plain>叫号</el-button>
				</el-card>
				<div class="l_cont">
					<el-form :model="formInline" class="demo-form-inline">
						<el-form-item label="">
							<el-input v-model="formInline.user" placeholder="请扫描条码"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<el-card shadow="always">
					<div>
						<div class="l_box_user">
							<h3>姓名：辛文硕 <span>男</span> <span>25岁</span></h3>
						</div>
						<div class="l_box_boer">体检项目</div>
					</div>
					<div v-for="(item,index) in list" :key="index" class="l_box_box">
						<div>{{item.name}}</div>
						<div>{{item.num}}</div>
					</div>
				</el-card>
			</div>
			<div class="flex_r">
				<!-- 右侧标签页 -->
				<el-select class="r_select" v-model="lableValue" placeholder="请选择" @change="gettitle(lableValue)" :class="titleindex == lableValue?'r_title_item_active':''" size="medium">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>

				<!-- 医师检查 -->
				<div v-if="titleindex == 0" class="r_box">
					<div class="r_box_top"></div>
					<el-form ref="form" :model="form" label-width="0px" label-position="left">
						<dir class="r_box_con">
							<div class="r_box_con_title r_box_con_sl">
								<div class="r_box_con_sl1">检查内容</div>
								<div class="r_box_con_sl2">检查结果</div>
								<div class="r_box_con_sl3">单位</div>
								<div class="r_box_con_sl4">趋势</div>
								<div class="r_box_con_sl5">参考范围</div>
								<div class="r_box_con_sl6"></div>
							</div>
							<!-- 检查内容 -->
							<div class="r_box_con_bor">
								<div class="r_box_con_box r_box_con_sl" v-for="(item,index) in list" :key="index">
									<div class="r_box_con_sl1">身高</div>
									<div class="r_box_con_sl2">
										<!-- <el-form-item label="" > -->
										<el-input v-model="form.name" size="small"></el-input>
										<!-- </el-form-item> -->
									</div>
									<div class="r_box_con_sl3">cm</div>
									<div class="r_box_con_sl4">
										<el-select v-model="form.region" placeholder="--" size="small">
											<el-option label="--" value="shanghai"></el-option>
											<el-option label="↑" value="beijing"></el-option>
											<el-option label="↓" value="beijing1"></el-option>
										</el-select>
									</div>
									<div class="r_box_con_sl5">121——123</div>
								</div>
							</div>
							<!-- 检查结果 -->
							<div class="r_box_con_res">
								<el-form-item label="诊断结果" prop="desc" label-width="180px">
									<el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5, maxRows: 8}" class="textarea"></el-input>
								</el-form-item>
								<el-form-item label="" prop="desc" label-width="180px">
									<el-button>诊断结果</el-button>
								</el-form-item>
								<div class="r_box_con_bor">
									<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange"
									 :on-remove="handleRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
								</div>
							</div>
							<!-- 底部签字 -->
							<div class="r_box_con_bottom">
								<div>
									<el-form-item label="检查医师" label-width="100px">
										<el-select v-model="formInline.region" clearable>
											<el-option label="王伟" value="shanghai"></el-option>
											<el-option label="张三" value="beijing"></el-option>
										</el-select>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="检查日期" label-width="100px">
										<el-input v-model="formInline.user" clearable></el-input>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="" label-width="50px">
										<el-checkbox-group v-model="form.type">
											<el-checkbox label="已检" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</div>
								<div>
									<el-button type="primary">保存</el-button>
								</div>
							</div>
						</dir>
					</el-form>
				</div>
				<!-- 功能检查 -->
				<div v-if="titleindex == 1" class="r_box">
					<div class="r_box_top1"></div>
					<el-form ref="form" :model="form" label-width="0px" label-position="left">
						<dir class="r_box_con">
							<div class="r_box_con_title r_box_con_sl">
								<div class="r_box_con_sl1">检查内容</div>
								<div class="r_box_con_sl2">检查结果</div>
								<div class="r_box_con_sl3"></div>
								<div class="r_box_con_sl4"></div>
								<div class="r_box_con_sl5"></div>
								<div class="r_box_con_sl6"></div>
							</div>
							<!-- 检查内容 -->
							<div class="r_box_con_bor">
								<div class="r_box_con_box r_box_con_sl" v-for="(item,index) in list" :key="index">
									<div class="r_box_con_sl1">身高</div>
									<div class="r_box_con_sl2">
										<!-- <el-form-item label="" > -->
										<el-input v-model="form.name" size="small"></el-input>
										<!-- </el-form-item> -->
									</div>
									<div class="r_box_con_sl3"></div>
									<div class="r_box_con_sl4">
									</div>
									<div class="r_box_con_sl5"></div>
								</div>
							</div>
							<!-- 检查结果 -->
							<div class="r_box_con_res">
								<el-form-item label="诊断结果" prop="desc" label-width="180px">
									<el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5, maxRows: 8}" class="textarea"></el-input>
								</el-form-item>
								<el-form-item label="" prop="desc" label-width="180px">
									<el-button>诊断结果</el-button>
								</el-form-item>
								<div class="r_box_con_bor">
									<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-remove="handleRemove"
									 :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
								</div>
							</div>
							<!-- 底部签字 -->
							<div class="r_box_con_bottom">
								<div>
									<el-form-item label="检查医师" label-width="100px">
										<el-select v-model="formInline.region" clearable>
											<el-option label="王伟" value="shanghai"></el-option>
											<el-option label="张三" value="beijing"></el-option>
										</el-select>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="检查日期" label-width="100px">
										<el-input v-model="formInline.user" clearable></el-input>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="" label-width="50px">
										<el-checkbox-group v-model="form.type">
											<el-checkbox label="已检" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</div>
								<div>
									<el-button type="primary">保存</el-button>
								</div>
							</div>
						</dir>
					</el-form>

				</div>
				<!-- 检验检查 -->
				<div v-if="titleindex == 2" class="r_box">
					<div class="r_box_top2"></div>
					<el-form ref="form" :model="form" label-width="0px" label-position="left">
						<dir class="r_box_con">
							<div class="r_box_con_title r_box_con_sl">
								<div class="r_box_con_sl1">检查内容</div>
								<div class="r_box_con_sl2">检查结果</div>
								<div class="r_box_con_sl3">单位</div>
								<div class="r_box_con_sl4">趋势</div>
								<div class="r_box_con_sl5">参考范围</div>
								<div class="r_box_con_sl6"></div>
							</div>
							<!-- 检查内容 -->
							<div class="r_box_con_bor">
								<div class="r_box_con_box r_box_con_sl" v-for="(item,index) in list" :key="index">
									<div class="r_box_con_sl1">身高</div>
									<div class="r_box_con_sl2">
										<!-- <el-form-item label="" > -->
										<el-input v-model="form.name" size="small"></el-input>
										<!-- </el-form-item> -->
									</div>
									<div class="r_box_con_sl3">cm</div>
									<div class="r_box_con_sl4">
										<el-select v-model="form.region" placeholder="--" size="small">
											<el-option label="--" value="shanghai"></el-option>
											<el-option label="↑" value="beijing"></el-option>
											<el-option label="↓" value="beijing1"></el-option>
										</el-select>
									</div>
									<div class="r_box_con_sl5">121——123</div>
								</div>
							</div>
							<!-- 检查结果 -->
							<div class="r_box_con_res">
								<el-form-item label="诊断结果" prop="desc" label-width="180px">
									<el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5, maxRows: 8}" class="textarea"></el-input>
								</el-form-item>
								<el-form-item label="" prop="desc" label-width="180px">
									<el-button>诊断结果</el-button>
								</el-form-item>
								<div class="r_box_con_bor">
									<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove" multiple :limit="3"
									 :file-list="fileList">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
								</div>
							</div>
							<!-- 底部签字 -->
							<div class="r_box_con_bottom">
								<div>
									<el-form-item label="检查医师" label-width="100px">
										<el-select v-model="formInline.region" clearable>
											<el-option label="王伟" value="shanghai"></el-option>
											<el-option label="张三" value="beijing"></el-option>
										</el-select>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="检查日期" label-width="100px">
										<el-input v-model="formInline.user" clearable></el-input>
									</el-form-item>
								</div>
								<div>
									<el-form-item label="" label-width="50px">
										<el-checkbox-group v-model="form.type">
											<el-checkbox label="已检" name="type"></el-checkbox>
										</el-checkbox-group>
									</el-form-item>
								</div>
								<div>
									<el-button type="primary">保存</el-button>
								</div>
							</div>
						</dir>
					</el-form>

				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import Vue from 'vue'
	import {
		uploadImgToBase64
	} from '../../common/utils/upload64.js'
	export default {
		data() {
			return {
				fileList: [],
				titleindex: 0,
				form: {
					type: '123'
				},
				formInline: {},
				list: [{
					name: '一般检查而不',
					num: '2',
				}, {
					name: '一般检查而不',
					num: '1',
				}, {
					name: '一般检查而不',
					num: '2',
				}, {
					name: '一般检查而不',
					num: '2',
				}],
				options: [{
					value: 0,
					label: '医师检查'
				}, {
					value: 1,
					label: '功能检查'
				}, {
					value: 2,
					label: '检验检查'
				}],
				lableValue: '',
			}
		},
		methods: {
			// 右侧title事件
			gettitle(row) {
				this.titleindex = row
			},
			// 上传图片成功
			handleChange(file) {
				console.log(file)
				this.getBase64(file.raw).then(data => {
					console.log(data)
				})
			},
			// 上传图片删除
			handleRemove() {
				this.form.picBase64 = "";
			},
			// 获取base64
			getBase64(data) {
				return new Promise((resolve, reject) => {
					const fileReader = new FileReader();
					fileReader.onload = (e) => {
						resolve(e.target.result);
					};
					fileReader.readAsDataURL(data);
					fileReader.onerror = () => {
						reject(new Error('文件流异常'));
					};
				});
			},
		}
	}
</script>

<style scoped>
	.dis_flex {
		display: flex;
	}

	.flex_l {
		width: 300px !important;
		flex-shrink: 0;
	}

	.l_top {
		margin-bottom: 10px;
	}

	.l_cont {
		margin: 10px 0px;
	}

	.l_box_user span:nth-child(1) {
		margin: 0px 30px;
	}

	.l_box_boer {
		height: 20px;
		background: rgb(113, 157, 240);
		margin: 10px auto;
		font-size: 14px;
		text-align: center;
		color: #fff;
	}

	.l_box_box {
		display: flex;
		align-items: center;
		font-size: 16px;
		line-height: 25px;
	}

	.l_box_box div:nth-child(1) {
		width: 50%;
	}

	.l_box_box div:nth-child(2) {
		width: 50%;
		color: #F56C6C;

	}

	.l_box_box div:hover {
		color: #F56C6C;

	}

	.r_box {
		margin-left: 20px;
		margin-top: 30px;
		width: 1300px;
		/* background:red; */
		line-height: 25px;
	}

	.r_box_top {
		height: 2px;
		background: #CAF2F2;
	}

	.r_box_top1 {
		height: 2px;
		background: #F2E5FF;
	}

	.r_box_top2 {
		height: 2px;
		background: #FFFFCA;
	}

	.r_box_con_title {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		border-bottom: 1px solid #333;
		font-size: 18px;
		line-height: 30px;
	}

	.r_box_con_bor {
		border-bottom: 1px solid #333;
		padding-bottom: 10px;
	}

	.r_box_con_box {
		margin-top: 10px;
		display: flex;
		align-items: center;
		font-size: 15px;
		line-height: 45px;
	}

	.r_box_con_sl1 {
		padding: 0px 5px;
		width: 20%;
	}

	.r_box_con_sl2 {
		padding: 0px 5px;
		width: 30%;
	}

	.r_box_con_sl3 {
		padding: 0px 5px;
		width: 10%;
	}

	.r_box_con_sl4 {
		padding: 0px 5px;
		width: 15%;
	}

	.r_box_con_sl5 {
		padding: 0px 5px;
		width: 15%;
	}

	.r_box_con_sl6 {
		padding: 0px 5px;
		width: 10%;
	}

	.r_box_con_res {
		margin-top: 20px;
	}

	.textarea {
		width: 600px
	}

	.r_box_con_res /deep/ .el-form-item__label {
		font-size: 22px !important;
	}

	.upload-demo {
		width: 100%;
	}

	.r_box_con_bottom {
		margin-top: 20px;
		display: flex;
	}

	.r_box_con_bottom div {
		margin-right: 15px;
	}

	.r_select {
		padding-top: 20px;
		padding-left: 50px;
	}
	.flex_r /deep/ .el-input--medium .el-input__inner{
		font-size: 20px;
    width: 400px;
    height: 50px;
	}

	.flex_r /deep/ .el-select-dropdown__item{
		font-size: 18px;
	}
</style>
